<template>
    <view style="height: 100%">
        <top title="订单详情" color="#fff" bgc="transparent" position="absolute" img="2" :homes="type"></top>
        <view class="bgc-box"></view>
        <view :class="'bgc-box ' + (info.status == 6 ? 'bgc-box1' : '')"></view>

        <view class="pr mt10">
            <view class="df ac" v-if="info.status == 5">
                <image class="img28" src="https://wx.xtwaixie.com/img/cg.png" />
                <h2 class="f20 f600 cf db ml8">订单已完成</h2>
            </view>
            <h2 class="f20 f600 cf db" v-else>订单{{ info.status_title }}</h2>

            <!-- 地址 -->
            <view class="mt15 bgcf br12 df ac pd15">
                <image class="img20 mr12" src="https://wx.xtwaixie.com/img/add1.png" />
                <view class="f1">
                    <view class="df ac f16 c28 f600">
                        <p class="mr12">{{ info.OrderAddress.username }}</p>
                        <p>{{ info.OrderAddress.mobile }}</p>
                    </view>
                    <p class="db mt3 f13 c6b">{{ info.OrderAddress.province + info.OrderAddress.city + info.OrderAddress.area + info.OrderAddress.address }}</p>
                </view>
            </view>

            <!-- 商品详情 -->
            <view class="mt12 bgcf br12 pd15">
                <p class="db f16 c28 f600">商品信息</p>
                <block v-for="(item, index) in info.OrderGoods" :key="index">
                    <view class="pd150 df bbf1" @tap="goDetail" :data-id="item.goods_id">
                        <image class="img72 br8 mr8"  referrerPolicy='no-referrer' :src="item.thumb" />
                        <view class="f1">
                            <h2 class="w224 ovh db f14 c28">{{ item.title }}</h2>
                            <p class="db mt2 f12 c9d">{{ item.sku_title }}</p>
                            <view class="df ac sb mt15">
                                <p class="f12 c28 f500">¥{{ item.price }}</p>
                                <view class="pr">
                                    <p class="f12 c9d tk-xs">×{{ item.number }}</p>
                                    <p class="f12 c10" v-if="item.is_refund == 1">退款审核中</p>
                                    <p class="f12 c3a db" v-if="item.is_refund == 2">退款成功</p>
                                    <p class="f12 cf5 db" v-if="item.is_refund == 3">退款已驳回</p>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>

                <ul class="db">
                    <li class="df ac sb mt10">
                        <p class="f12 c6b">商品总价</p>
                        <p class="f12 c6b">
                            <span class="c9d">（未含税）</span>
                            ¥{{ info.price }}
                        </p>
                    </li>
                    <li class="df ac sb mt10">
                        <p class="f12 c6b">运费</p>
                        <p class="f12 c6b">¥{{ info.express_fee }}</p>
                    </li>
                    <li class="df ac sb mt10">
                        <p class="f12 c28 f600">商品总价</p>
                        <p class="f12 cff8 f600">
                            <span class="f400">（含税）</span>
                            ¥{{ info.total_price }}
                        </p>
                    </li>
                    <li class="df ac sb mt10">
                        <p class="f12 c9d"></p>
                        <button class="contact-but" open-type="contact">联系客服</button>
                    </li>
                </ul>
            </view>

            <!-- 订单编号 -->
            <ul class="db mt12 bgcf br12 pd15">
                <li class="df ac">
                    <p class="f12 c9d">订单编号</p>
                    <p class="f12 c28 f1 ml15">{{ info.order_sn }}</p>
                    <P class="cop-but ml15" :data-text="info.order_sn" @tap.native="copyText($event, { text: info.order_sn })">复制</P>
                </li>
                <li class="df ac mt10">
                    <p class="f12 c9d">创建时间</p>
                    <p class="f12 c28 f1 ml15">{{ info.created_at }}</p>
                </li>
                <li class="df ac mt10">
                    <p class="f12 c9d">支付方式</p>
                    <p class="f12 c28 f1 ml15">{{ info.pay_type_title }}</p>
                </li>
            </ul>

            <!-- 物流 -->
            <ul class="db mt12 bgcf br12 pd15" v-if="info.express">
                <li class="df ac">
                    <p class="f12 c9d">物流名称</p>
                    <p class="f12 c28 ml15">{{ info.express }}</p>
                </li>
                <li class="df ac mt10">
                    <p class="f12 c9d">运单编号</p>
                    <p class="f12 c28 f1 ml15">{{ info.express_no }}</p>
                    <P class="cop-but ml15" @tap.native="copyText($event, { text: info.express_no })" :data-text="info.express_no">复制</P>
                </li>
            </ul>
        </view>

        <view class="pob pd715" v-if="info.status != 2 || info.status != 6">
            <view class="df ac sb">
                <view>
                    <p class="f16 cff8 f600" v-if="info.status == 1">合计：¥{{ info.need_price }}</p>
                </view>
                <view class="df ac">
                    <p class="order-but" @tap.native="onCancel" v-if="info.status == 1">取消订单</p>
                    <p class="order-but order-but1 ml8" @tap.native="onBuy" v-if="info.status == 1">立即支付</p>
                    <p class="order-but order-but1 ml8" v-if="info.status == 3" @tap.native="onConfirm">确认收货</p>
                    <p class="order-but" @tap.native="showPopup" v-if="info.is_refund == 1">申请退货</p>
                    <p class="order-but order-but1 ml8" @tap.native="onEvaluate" v-if="info.is_evaluate == 1">评价</p>
                </view>
            </view>
        </view>

        <van-popup :show="show" round closeable @close="onClose" position="bottom">
            <h2 class="h48 f16 c28 df ac jc f600">选择退货商品</h2>
            <scroll-view class="pd015 h360" :scroll-y="true">
                <block v-for="(item, index) in list" :key="index">
                    <li class="pd100 df ac">
                        <image class="img18 mr12"  referrerPolicy='no-referrer' :src="item.is_check ? 'https://wx.xtwaixie.com/img/sel1.png' : 'https://wx.xtwaixie.com/img/sel2.png'" @tap="onChecnk" :data-i="index" />
                        <view class="f1 df">
                            <image class="img90 mr12 br8"  referrerPolicy='no-referrer' :src="item.thumb" />
                            <view class="f1">
                                <h2 class="f14 c28 db f500 ovh2 w180">{{ item.title }}</h2>
                                <P class="f12 c9d db mt6">{{ item.sku_title }}</P>
                                <view class="df ac sb mt15">
                                    <p class="f12 c28 f500">¥{{ item.price }}</p>
                                    <p class="f12 c9d">×{{ item.number }}</p>
                                </view>
                            </view>
                        </view>
                    </li>
                </block>
            </scroll-view>
            <view class="pd715">
                <button class="sub" @tap="onSuer">确定({{ ids.length }})</button>
            </view>
        </van-popup>
    </view>
</template>

<script>
import top from '@/component/top/top';
const http = require('../../utils/http');
export default {
    components: {
        top
    },
    data() {
        return {
            show: false,
            id: '',
            info: {
                status: 0,
                status_title: '',

                OrderAddress: {
                    username: '',
                    mobile: '',
                    province: '',
                    city: '',
                    area: '',
                    address: ''
                },

                OrderGoods: [],
                express_fee: '',
                order_sn: '',
                created_at: '',
                pay_type_title: '',
                express: '',
                express_no: '',
                need_price: '',
                is_refund: 0,
                is_evaluate: 0
            },
            list: [],
            ids: [],
            type: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            id: options.id || 0,
            type: options.type || ''
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.setData({
            show: false
        });
        this.getDetail();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        goDetail(e) {
            let id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/order/shopDetail?id=' + id
            });
        },

        // 选择退款
        onChecnk(e) {
            let i = e.currentTarget.dataset.i;
            let is_check = this.list[i].is_check;
            let ids = [];
            this.setData({
                [`list[${i}].is_check`]: !is_check
            });
            this.list.forEach((i) => {
                if (i.is_check) {
                    ids.push(i.id);
                }
            });
            this.setData({
                ids: ids
            });
        },

        // 获取详情
        getDetail() {
            http.request('order/orderInfo', {
                id: this.id
            })
                .then((res) => {
                    res.data.OrderGoods.forEach((i) => {
                        if (i.is_refund == 0) {
                            i.is_check = false;
                            this.list.push(i);
                        }
                    });
                    this.setData({
                        info: res.data,
                        list: this.list
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        // 支付
        onBuy() {
            let id = this.id;
            http.request('order/orderPay', {
                id: id
            })
                .then((res) => {
                    uni.requestPayment({
                        timeStamp: res.data.wechatPay.timeStamp,
                        nonceStr: res.data.wechatPay.nonceStr,
                        package: res.data.wechatPay.package,
                        signType: res.data.wechatPay.signType,
                        paySign: res.data.wechatPay.sign,
                        success: (res) => {
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: '/pages/order/orderSuccess'
                                });
                            }, 1000);
                        },
                        fail: (res) => {
                            console.log(res);
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            });
                        }
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        // 取消订单
        onCancel() {
            let id = this.id;
            let that = this;
            uni.showModal({
                title: '取消',
                content: '您确认要取消该订单吗？',
                success(res) {
                    if (res.confirm) {
                        http.request('order/cancel', {
                            id: id
                        })
                            .then((res) => {
                                uni.showToast({
                                    title: res.message
                                });
                                that.getDetail();
                            })
                            .catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                            });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        // 确认收货
        onConfirm(e) {
            let id = this.id;
            let that = this;
            uni.showModal({
                title: '确认收货',
                content: '您确认要确认收货吗？',
                success(res) {
                    if (res.confirm) {
                        http.request('order/okOrder', {
                            id: id
                        })
                            .then((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                                that.getDetail();
                            })
                            .catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                            });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        // 去评价
        onEvaluate() {
            uni.navigateTo({
                url: '/pages/myOrder/evaluate?id=' + this.id
            });
        },

        // 确定退货
        onSuer() {
            if (this.ids.length == 0) {
                uni.showToast({
                    title: '请选择退货商品',
                    icon: 'none'
                });
                return false;
            }
            uni.navigateTo({
                url: '/pages/myOrder/logistics?ids=' + this.ids + '&id=' + this.id
            });
            // if (this.data.info.status == 2) {
            //   this.onSubmit()
            // } else {

            // }
        },

        onSubmit() {
            let data = {
                order_id: this.id,
                order_goods_ids: this.ids
            };
            http.request('order/orderRefund', data)
                .then((res) => {
                    uni.showToast({
                        title: res.message
                    });
                    this.getDetail();
                    this.setData({
                        show: false
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        // 退货选择
        showPopup() {
            this.setData({
                show: true
            });
        },

        onClose() {
            this.setData({
                show: false
            });
        },

        // 点击复制
        copyText(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let text = e.currentTarget.dataset.text;
            uni.setClipboardData({
                data: text,
                success(res) {
                    uni.getClipboardData({
                        success(res) {
                            uni.showToast({
                                title: '复制成功',
                                icon: 'none'
                            });
                        }
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './orderDetail.css';
</style>
